<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Example 56 (ALL) - Process Ad Events with Javascript</title>
<script type="text/javascript" src="../dist/flash-firebug-fix.js"></script>
<link rel="stylesheet" type="text/css" href="css/global.css" />
</head>
<body>
<h2>Example 56 (ALL) - Process Ad Events with Javascript</h2>
<p class="example">
This example illustrates the javascript callback API for Ad related events. Events are
fired by the Open Ad Streamer when a linear ad starts, reaches the first quartile,
midpoint, 3rd quartile and on completion. Events are also fired when non-linear ads
are shown, hidden, companions shown and hidden, and the ad notice shown and hidden.
Finally events are fired when an ad is clicked.
</p>
<p class="example">
In this example, a series of DIVs are displayed around the player. As each event fires,
the corresponding DIV is turned green. If you have Firebug installed, bring up the console.
Debug output is shown as each event fires so you can see the javascript callback event occur.
</p>
<script type="text/javascript">
function onLinearAdStart() {
	console.log("OAS EVENT: linear ad begin");
    document.getElementById('linear-ad-start').style.backgroundColor = "#00CC00";	
}

function onLinearAdFirstQuartileComplete() {
	console.log("OAS EVENT: linear ad first quartile");
    document.getElementById('linear-ad-first-quartile').style.backgroundColor = "#00CC00";	
}

function onLinearAdMidPointComplete() {
	console.log("OAS EVENT: linear ad midpoint");
    document.getElementById('linear-ad-midpoint').style.backgroundColor = "#00CC00";	
}

function onLinearAdThirdQuartileComplete() {
	console.log("OAS EVENT: linear ad third quartile");
    document.getElementById('linear-ad-third-quartile').style.backgroundColor = "#00CC00";	
}

function onLinearAdFinish() {
	console.log("OAS EVENT: linear ad finish");
    document.getElementById('linear-ad-complete').style.backgroundColor = "#00CC00";	
}

function onLinearAdClick() {
	console.log("OAS EVENT: linear ad click");
    document.getElementById('linear-ad-clicked').style.backgroundColor = "#00CC00";	
}

function onNonLinearAdShow() {
	console.log("OAS EVENT: non linear ad show");
    document.getElementById('ad-nl-show').style.backgroundColor = "#00CC00";	
}

function onNonLinearAdClickThrough() {
	console.log("OAS EVENT: non linear ad click");
    document.getElementById('ad-nl-click').style.backgroundColor = "#00CC00";	
}

function onNonLinearAdHide() {
	console.log("OAS EVENT: non linear ad hide");
    document.getElementById('ad-nl-hide').style.backgroundColor = "#00CC00";	
}

function onCompanionAdShow() {
	console.log("OAS EVENT: companion ad show");
    document.getElementById('companion-show').style.backgroundColor = "#00CC00";	
}

function onCompanionAdHide() {
	console.log("OAS EVENT: companion ad hide");
    document.getElementById('companion-hide').style.backgroundColor = "#00CC00";	
}

function onAdNoticeShow() {
	console.log("OAS EVENT: ad notice show");
    document.getElementById('ad-notice-show').style.backgroundColor = "#00CC00";	
}

function onAdNoticeHide() {
	console.log("OAS EVENT: ad notice hide");
    document.getElementById('ad-notice-hide').style.backgroundColor = "#00CC00";	
}

function onRegionCloseClicked() {
	console.log("OAS EVENT: region close clicked");
    document.getElementById('region-close-click').style.backgroundColor = "#00CC00";	
}

function onRegionClicked() {
	console.log("OAS EVENT: region clicked");
    document.getElementById('region-click').style.backgroundColor = "#00CC00";	
}
</script>
<div id="container">
     <div id="player-left-500">
        <embed 
		  id="ply"
		  data="../dist/4.5.swf"
		  src="../dist/4.5.swf" 
		  width="614"
		  height="345"
		  allowscriptaccess="always"
		  allowfullscreen="true"
		  flashvars="height=345&width=614&plugins=../dist/OpenAdStreamer.swf&config=config/all56.xml"
		/>
        <div id="event-container-614x160">
            <div id="event-container-150x140">
	            <div class="event-container-148x68" id="linear-ad-start">
	               <br/>Linear Start
	            </div>
	            <div class="event-container-148x68" id="linear-ad-first-quartile">
	               <br/>Linear 1st Quartile
	            </div>
            </div>
            <div id="event-container-150x140">
	            <div class="event-container-148x68" id="linear-ad-midpoint">
	               <br/>Linear Midpoint
	            </div>
	            <div class="event-container-148x68" id="linear-ad-third-quartile">
	               <br/>Linear 3rd Quartile
	            </div>
            </div>
            <div id="event-container-150x140">
	            <div class="event-container-148x68" id="linear-ad-complete">
	               <br/>Linear Complete
	            </div>
	            <div class="event-container-148x68" id="linear-ad-clicked">
	               <br/>Linear Clicked
	            </div>
            </div>
            <div id="event-container-150x140">
	            <div class="event-container-148x68" id="ad-notice-show">
	               <br/>Ad Notice Show
	            </div>
	            <div class="event-container-148x68" id="ad-notice-hide">
	               <br/>Ad Notice Hide
	            </div>
            </div>        
        </div>
     </div>
     <div id="player-right-500">
        <div id="event-container-160x505">
            <div class="event-container-160x68" id="ad-nl-show">
               <br/>Non Linear Show
            </div>
            <div class="event-container-160x68" id="ad-nl-hide">
               <br/>Non Linear Hide
            </div>
            <div class="event-container-160x68" id="ad-nl-click">
               <br/>Non Linear Click
            </div>
            <div class="event-container-160x68" id="companion-show">
               <br/>Companion Show
            </div>
            <div class="event-container-160x68" id="companion-hide">
               <br/>Companion Hide
            </div>
            <div class="event-container-160x68" id="region-close-click">
               <br/>Region Close Click
            </div>
            <div class="event-container-160x68" id="region-click">
               <br/>Region Click
            </div>
        </div>
     </div>
</div>
<br/>
<p>
The configuration for this example is:
</p>
<div class="codebox">
<pre>
<code>
// An example ad event Javascript callback

function onLinearAdStart() {
    console.log("OAS EVENT: linear ad begin");
    document.getElementById('linear-ad-start').style.backgroundColor = "#00CC00";	
}

//... the other callback functions go in here

&lt;embed 
  id="ply"
  data="../dist/4.5.swf"
  src="../dist/4.5.swf" 
  width="450"
  height="300"
  allowscriptaccess="always"
  allowfullscreen="true"
  flashvars="height=300&width=450&plugins=../dist/OpenAdStreamer.swf&config=config/all56.xml"
/&gt;
</code>
</pre>
</div>
<p>
"all56.xml" is defined as:
</p>
<div class="codebox">
<pre>
<code class="xml">
&lt;config&gt;
   &lt;openadstreamer.title&gt;
       Example 56 (ALL) - Process Ad Events with Javascript
   &lt;/openadstreamer.title&gt;
   &lt;openadstreamer.json&gt;
       {
            "shows": {
                 "streams": [
                      {
                          "file":"http://streaming.openvideoads.org/shows/the-black-hole.mp4",
                          "duration":"00:00:30"
                      }
                 ]
            },

            "ads": {
                 "servers": [
                     {
                          "type": "OpenX",
                          "apiAddress": "http://openx.openvideoads.org/openx/www/delivery/fc.php",
                     }
                 ],
                 "schedule": [
                      {
                          "zone": "5",
                          "position": "pre-roll"
                      },
                      {
                          "zone": "33",
                          "width": 450,
                          "height": 50,
                          "startTime": "00:00:05",
                          "duration": "15"
                      }
                 ],
            },

            "debug": {
                 "levels": "fatal",
                 "debugger": "firebug"
            }
       }
   &lt;/openadstreamer.json&gt;
&lt;/config&gt;
</code>
</pre>
</div>
<script type="text/javascript" src="js/tracking.js">
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-10158120-3");
if(TRACKING_TURNED_ON) {
	pageTracker._trackPageview();
}
} catch(err) {}
</script>
</body>
</html>